<template>
	<view class="show-contract">
		<view class="contract-header">
			<image class="header-img" src="https://img1.baidu.com/it/u=1991315436,2389316651&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=366" mode=""></image>
		</view>
		<scroll-view scroll-y="true" :style="'height:'+clientHeight+'px;'">
			<view class="contract" :style="'height:'+clientHeight+'px;'">
				<view class="show-contract-content">
					<view class="sign-item">
						<view class="sign-bg-title">
							<view class="item-title">风景线</view>
						</view>
						<view class="item-content">
							<view class="item-text">
								<rich-text >学习周期1个月</rich-text>
								<rich-text >学习周期1个月</rich-text>
								<rich-text >学习周期1个月</rich-text>
							</view>
						</view>
						
						<view class="sign-bg-title">
							<view class="item-title">风景线</view>
						</view>
						<view class="item-content">
							<view class="item-text">
								<rich-text >学习周期1个月</rich-text>
								<rich-text >学习周期1个月</rich-text>
								<rich-text >学习周期1个月</rich-text>
							</view>
						</view>
						
						<view class="sign-bg-title">
							<view class="item-title">风景线</view>
						</view>
						<view class="item-content">
							<view class="item-text">
								<rich-text >学习周期1个月</rich-text>
								<rich-text >学习周期1个月</rich-text>
								<rich-text >学习周期1个月</rich-text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="know">
			<view class="contract-know">
				<rich-text class="know-text" @tap="goBack">返 回</rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getClassList } from '../../servies/calss.js'
	export default {
		data(){
			return {
				clientHeight:null
			}
		},
		onReady(){
			uni.getSystemInfo({
				success:(res) => {
					let info = uni.createSelectorQuery().in(this).select('.contract-header')
					info.boundingClientRect(data => {
						this.clientHeight = res.windowHeight - data.height
					}).exec(function(res){
						
					})
					
					// 获取底部高度
					let know = uni.createSelectorQuery().in(this).select('.contract-know')
					know.boundingClientRect(data => {
						this.clientHeight = this.clientHeight - data.height
					}).exec(function(res){
						
					})
				}
			})
		},
		methods:{
			// 发送请求
			async __init(){
				const data = {
					pageNum:10,
					pageSize:1
				}
				const res = await getClassList(data)
				console.log(res)
			},
			goBack(){
				// 返回上一级页面
				uni.navigateBack({
					delta:1
				})
			}
		},
		onLoad(){
			console.log('abc')
			this.__init()
		}
	}
</script>

<style scoped>
	/* 隐藏滚动条 */
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
	}
	.header-img {
		width: 100%;
		height: 240rpx;
		opacity: 0.5;
	}
	.show-contract {
		width: 750rpx;
		height: 100vh;
		overflow: hidden;
		padding-bottom: 200rpx;
		box-sizing: border-box;
		background: url('https://img1.baidu.com/it/u=485193858,630250825&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889') no-repeat;
		background-size: cover;
	}
	.contract-header {
		width: 100vw;
		height: 300rpx;
		position: relative;
	}
	.contract {
		width: 702rpx;
		padding: 0 24rpx;
		padding-bottom: 60rpx;
	}
	.sign-item {
		width: 702rpx;
		margin-bottom: 60rpx;
	}
	.sign-bg-title {
		width: 702rpx;
		height: 100rpx;
		position: relative;
	}
	.item-title {
		position: absolute;
		left: 50%;
		top: 10rpx;
		transform: translate(-50%);
		font-size: 48rpx;
		font-weight: normal;
		line-height: 90rpx;
		color: #5d6fe5;
	}
	.item-content {
		width: 702rpx;
		height: 500rpx;
		background: url('https://img2.baidu.com/it/u=2618989769,2281635905&fm=253&fmt=auto&app=138&f=JPEG?w=935&h=500') no-repeat;
		background-size: cover;
	}
	.sign-bg-footer {
		width: 702rpx;
		height: 100%;
	}
	.item-text {
		padding: 20rpx 40rpx;
		font-size: 30rpx;
	}
	.know {
		width: 100vw;
		height: 300rpx;
		position: relative;
	}
	.contract-know {
		width: 200rpx;
		height: 70rpx;
		font-size: 30rpx;
		background: rgba(0, 0, 0, .5);
		border-radius: 20rpx;
		position: fixed;
		left: -5%;
		top: 5%;
	}
	.know-text {
		text-align: center;
		color: #fff;
		line-height: 70rpx;
	}
</style>